@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Italianno');
@import url(servicios_ac.css);
@import url(marcas.css);
@import url(contacto.css);
@import url(novedades.css);
@import url(serviamigo.css);


a{
 font-family: 'Libre Franklin', sans-serif;    
    
}

h2,h3,h4,h5,h6{
 font-family: 'Libre Franklin', sans-serif;  
letter-spacing: 1.5    
}
p{font-family: 'Libre Franklin', sans-serif; 
 letter-spacing: 1.5px;
}

img{
display: block;
max-width: 100%;
}

*{
 margin: 0;
 padding:0;
 box-sizing:border-box;
}

body{
font-family: 'Libre Franklin', sans-serif; 
}


header{
background:white; /*gba(255,255,255,0.75);*/
width: 100%;
height: 90px;
position: fixed;    
top:0;
left: 0;
z-index: 100;    
}

header img{
display: block;
float: left;
width: 160px;
height:90px;    
}
#menu-bar{
display: none;    
}    

header label{
float: right;
font-size: 20px;
color:#ff0000;
/*background: #2980B9;  */
padding: 5px;    
margin: 10px 0;    
border-radius: 5px;    
}
.contenedor{
width: 90%;
margin: auto;
}

section{
width: 100%;
}

header .contenedor{
display: table;
}


@media(min-width:768px){
    header img{
    margin-top:-15px;    
    width: 300px;
    height: 120px;
 
    }    
}

/****************************** MENU ***********************/



.menu{
position: absolute;    
top: 70px;
left: 0;
width: 100%;
height:100vh;
transition: all 1s;
transform: translateX(-100%);
 }
   
.menu a{
display: block;
color: white;
background:#ff0000;    
height: 50px;    
text-decoration: none;
padding: 15px;
border-bottom: 2px solid white;  
}


.menu a:hover{
transform: translateX(0%);
transition: all 2s;  
border: 2px solid red;
border-radius: 12px;    
}

#menu-bar:checked ~ .menu{
transform: translateX(0%);
transition: all 1s;    
}

@media(min-width:1024px){
    header label{
        display: none;
    }  
    header{
        height: 105px;
        
    }
    .contenedor{
    width: 1050px;
    }

    h2{
        position: static;
        float: right;
        margin-top: 36px;
        font-size: 14px;
        font-weight: lighter;
        line-height: 20px;
        color:darkslategray;    
    }
    .menu{
        position: static;
        margin-top: 25px;
        margin-left:40px;
       
        width:auto;
        height: auto;
        transform: translateX(0%);
        float:left;
        display: flex;
      }
    
    
    .menu a{
        font-size: 12px;
        color:#0B0B3B;
        border :none;
        background:white;/* #FFC300;*/
        font-family: 'Libre Franklin', sans-serif; 
        border-radius: 6%;
        
    }
}

/********************BANNER y SLIDER ***********/

#banner{
width: 100%;    
margin-top: 90px;
position: relative;
}
#banner img{
width: 100%;
height: 100%;
}

#banner .contenedor{
position: absolute;
top:50%;
left: 54%;
transform: translateX(-50%) translateY(-50%);
}

 #banner  .c1_titulo{
color: white;
font-size: 20px;
font-weight: 100;    
font-family: 'Libre Franklin', sans-serif;    
}




 #banner .c1_txt{
color: white;
text-align: left;     
font-size: 14px;
margin-bottom: 10px;    
}
 #banner h5{
color: white; 
font-size:13px;
margin-bottom: 15px;    
}

#banner .cita_rep{
color: midnightblue;
background: white;/*#2980B9;*/  
text-decoration: none;
padding: 7px;
font-size: 9px;
font-weight: lighter;
font-family: 'Libre Franklin', sans-serif;   
border-radius: 15px;    
}

#banner .cita_rep:hover{
transform: translateX(0%);
transition: all 1s;      
background:  midnightblue;   
color: white;    
}



/*       CONTENEDOR 2 AC    */


#banner .contenedor_ac{
position: absolute;
top:35%;
left: 55%;
transform: translateX(-50%) translateY(-50%);
width: 100%;    
}

#banner .c2_titulo{
width: 100%;
color: white;
margin-bottom: 45px;  
text-align: left;
font-size: 18px;    
font-weight: 100;
}

#banner .c2_txt{
text-align: left;
color: white;
font-size: 13px;  
}


/*  CONTENEDOR 3 REFRIGERADOR    */


#banner .contenedor_refri{
position: absolute;
top:40%;
left:55%;
transform: translateX(-50%) translateY(-50%);
width:100%;
}

#banner .c3_titulo{
color: white;
font-weight: bolder;
margin-bottom: 35px;    
}
#banner .c3_txt{
color: white;
text-align: left;
font-size: 12px;    
}



/**  CONTENEDOR C4 TV  ***/
#banner .contenedor_tv{
position: absolute;
top:50%;
left:60%;
transform: translateX(-50%) translateY(-50%);
width:100%;
}

#banner .c4_titulo{
color: white;
font-size: 22px;    
font-weight: bolder;
margin-bottom: 10px;  
}
#banner .c4_txt{
text-align: left;
color:white;    
font-size: 14px;
margin-bottom: 20px;    
}

#banner .c4_titulo2{
color: white;
font-size: 14px;    
font-weight: bolder;
margin-bottom: 30px;  
}

#banner .cita_tv{
display: block;   
margin-top: 40px;
width: 80px;    
color:  white;
background:  red;
text-align: center;
text-decoration: none;
padding: 5px;
font-size: 12px;
font-weight: lighter;
font-family: 'Libre Franklin', sans-serif;  
border-radius: 10px;
}
#banner .cita_tv:hover{
transform: translateX(0%);
transition: all 1s;      
background:  midnightblue;   
color: white;    
}




@media(min-width:768px){
    

    #banner .c1_titulo{
    font-size: 40px;    
    }    
    #banner .c1_txt{
    font-size: 26px;    
    }
    #banner .cita_rep{
    font-size:18px;
    padding: 13px;    
    }
    
#banner .contenedor{
top:50%;
left: 50%;
}
    
    
    #banner .c2_titulo{
    font-size: 40px;    
    }    
    #banner .c2_txt{
    font-size: 26px;    
    }
    #banner .cita_ac{
    font-size:16px;    
    width: 20%;
    }
    #banner .contenedor_ac{
    top:50%;
    left: 60%;    
}
     #banner .c3_titulo{
    font-size: 30px;
    line-height:45px;     
    }    
    #banner .c3_txt{
    font-size: 20px;    
    }
    #banner .cita_refri{
    font-size:16px;    
    width: 20%;
    }
     #banner .contenedor_tv{
    top:50%;
    left: 57%;     
     }
     #banner .c4_titulo{
    font-size: 40px;    
    }    
    #banner .c4_txt{
    font-size: 26px;    
    }
     #banner .c4_titulo2{
    font-size: 20px;    
    }    
    #banner .cita_tv{
    font-size:18px;    
    width: 12%;
    padding: 10px;    
    }
}


/*****  SLIDER BANNER ***/
.main_slider{
    
}

.main_slider h1{
margin: 0;
width: 100%;    
text-align: center;
color: white;
font-size: 34px;    
font-family: 'Libre Franklin', sans-serif;
padding-top: 50px;
padding-bottom: 45px;    
}

#contenedor_slider {
margin: auto;    
width:100%;
position: relative;
overflow: hidden;
/*box-shadow: 0 0 0 0px #FFC300, 0 15px 50px;*/
}

#slider{
display: flex;
width:400%;
}

#slider section{
width: 100%;    
}

#slider img{
display: block;
width: 100%;
height:185px;    
max-height: 600px;

}

#btn_prev,#btn_next{
position: absolute;
top:50%;
background:rgba(255,255,255,0.6);    
width: 25px;
height: 25px;
text-align: center;
line-height: 20px;
font-size: 17px;   
font-family: monospace;    
border-radius:50%; 
transform:translateY(100%);
cursor: pointer;
}

#btn_prev:hover,#btn_next:hover{
background: rgba(255,255,255,1)    
}

#btn_prev{
left: 10px;
}
#btn_next{
right: 10px;    
}

@media(min-width:768px){
    #banner{
        margin-top: 80px;
      }
    
    #banner img{
    height: 500px;
    width: 100%;    
    }
    
#banner h4{
font-size: 35px;
}
#banner p{
font-size: 18px;
margin-bottom: 20px;    
}
#banner h5{
font-size: 25px;
margin-bottom: 40px;    
}

#banner a{
font-size: 16px;
}
    form{
        width: 100%;
        
    }
    
#btn_prev,#btn_next{
top:46%;
width: 45px;
height: 45px;
line-height: 42px;
font-size: 24px;   
}    
    


}
/***************** MAIN SERVICIOS ***********/


.main{
background:#EAF2F8;
padding-top: 50px;
}

h2{
display: block;
width: 80px;
height: 80px;
padding: 20px 10px;    
margin: auto;    
background:white;
text-align: center;
border-radius: 20px;    
font-size:30px;
color: #2980B9;
margin-bottom: 20px;    
}

h2:hover{
color: white;
background:#3498DB; 
cursor:pointer;
}

.serv_titulo{
display: block;
width: 100%;
font-size: 18px;    
text-align: center;
color: midnightblue;
margin-bottom: 15px;    
}

.serv_txt{
width: 100%;
margin: auto;    
text-align:center;
color:#808B96;
font-size: 12px;    
margin-bottom: 10px;
margin-top: 1px;    
line-height:20px;
font-weight: 400;    
}


.servicios a{
display: block;
color: #2980B9;
text-decoration: none;    
text-align: center;
font-size: 14px;
padding-bottom: 15px;    
}


.main h6{
color: gray;
text-align: center;
font-size: 35px;
padding-top: 25px;
margin-bottom: 35px;    
}

.servicios img{
margin: auto;
cursor: pointer;
margin-bottom: 20px;    

}
.servicios{
width: 100%;
margin: auto;
}

.servicios article {
width: 100%;
margin-bottom:20px;
}

@media(min-width:768px){
    
    
    .servicios{
        margin-top: 50px;
        width:100%;
        display: flex;
        justify-content:space-between;
    flex-wrap: wrap;    
    }
    .servicios article{
    width:14%;
    }
    
h2{
display: block;
width: 80px;
height: 80px;
padding: 20px 10px;    
margin: auto;    
background:white;
border-radius: 20px;    
font-size:30px;
color: #2980B9;
margin-bottom: 20px;
margin-right: 31px;    
}
    
}

/******************* REPARACIONES E INSTALACIONES ******************/




.main_top{
margin: 0;
padding: 0;    
position: relative;
}

.img_insta{
width:100%;
height: 800px;    
margin-left: -120px;    
}


.main_top .contenedor{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

.letras_rojas{
color: #ff0000;
text-align: center;
font-size: 20px;
margin-bottom: 10px;  
font-family: 'Libre Franklin', sans-serif;     
}

.letras_azules{
color: midnightblue;
text-align: center;
font-size: 20px;
margin-bottom: 40px;  
font-family: 'Libre Franklin', sans-serif;       
}

.letras{
color:#808B96;      
text-align: center;
font-size: 13px;    
font-weight: 100;
line-height: 36px; 
margin-bottom: 30px;   
}

.centros_servicios {
margin: auto;
}


.centros_servicios img{
margin: auto;
width: 150px;    
max-width: 900px;  
}


.main_top a{
display: block;
margin: auto;
height: 40px;
width: 115px;    
background: #ff0000; 
color: white;    
text-align: center;
text-decoration: none;
margin-top: 20px;
padding-bottom: 30px;    
padding: 9px;    
font-size: 12px;
border-radius: 20px;    
}

.main_top a:hover{
transform: translateX(0%);
transition: all 1s;      
background:  midnightblue;   
color: white;    
}



.icon-phone{
text-align: center;
margin-top: 20px;
color:#ff0000;
font-size: 16px;
font-weight: bolder;
margin-bottom: 30px;
}

span{
margin-left:15px;  
}


.centros_servicios article{
margin: auto;
margin-bottom: 40px;
}

@media(min-width:768px){

.letras_rojas{
font-size: 25px;
}

.letras_azules{
font-size: 24px;
}

.letras{
color:#808B96;      
text-align: center;
font-size: 15px;    
font-weight: 100;
line-height: 36px; 
margin-bottom: 30px;   
}

.centros_servicios{
 display: flex;
 width: 100%;
 justify-content: space-between;
}
    
    .img_insta{
    height: 550px;    
    }    
.main_top .contenedor{
position: absolute;
top: 54%;
left: 70%;
transform: translateX(-50%) translateY(-50%);
width: 50%;    
}
    

.main_top a{
width: 180px;
font-size: 16px;
}

.tel{
font-size: 16px;        
}
    
    
    
}
/************************** IMG AVERIAS  ********************/


.banner_averia img{
width: 100%;
height: 300px;    
}

.banner_averia{
position: relative;    
margin-bottom: 20px;    
}

.banner_averia .contenedor{
position: absolute;
top: 39%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

.banner_averia  .c1_titulo{
color: white;
font-size: 25px;
font-weight: 100;    
font-family: 'Libre Franklin', sans-serif;    
}

.banner_averia .c1_txt{
color: white;
text-align: left;    
font-size: 14px;
margin-bottom: 20px;    
}
.banner_averia h5{
color: white; 
font-size:14px;
margin-bottom: 30px;    
}

.banner_averia .cita_rep{
color: midnightblue;
background: white;  
text-decoration: none;
padding: 10px;
font-size: 12px;
font-weight: lighter;
font-family: 'Libre Franklin', sans-serif;   
border-radius: 15px;    
}

.banner_averia .cita_rep:hover{
transform: translateX(0%);
transition: all 1s;      
background:red;    
color:white;
}

.banner_averia .llamanos{
color: white;
background: rgba(255,255,255,0.1);  
text-decoration: none;
padding: 10px;
font-size: 12px;
font-weight: lighter;
font-family: 'Libre Franklin', sans-serif;   
border-radius: 15px;
border: 1px solid white;    
}

.banner_averia .llamanos:hover{
transform: translateX(0%);
transition: all 1s;      
background:white;
color:midnightblue;   
}

@media(min-width:768px){
.banner_averia img{
height: 450px;    
margin-bottom:50px;
    }
.banner_averia  .c1_titulo{
font-size: 35px;
margin-bottom: 20px;    
}

.banner_averia .c1_txt{
font-size: 18px;
margin-bottom: 20px;    
}
.banner_averia h5{
color: white; 
font-size:17px;
margin-bottom: 50px;    
}

.banner_averia .cita_rep{
font-size: 16px;
}

.banner_averia .llamanos{
font-size: 16px;
}
}







/*---------------- ----- S L I D E R   2 ------*/


#c_slider {
margin: auto;    
width:100%;
position: relative;
overflow: hidden;
/*box-shadow: 0 0 0 0px #FFC300, 0 15px 50px;*/
}

#slider_2{
display: flex;
width:500%;
}

#slider_2 section{
width: 100%;    
}

#slider_2 img{
display: block;
margin: auto;    
width: 90%;
height:160px;    
max-height: 160px;
max-width: 400px;    
border-radius: 20px; 
margin-bottom: 40px;    
}

#btn_prev2{
margin-top: 40px; 
width: 50px;
height: 50px;    
text-align: center;
font-size: 20px;
padding: 14px;    
color: white;
border-radius: 50%;    
background: #ff0000;  
margin-left: 8px;  
cursor:pointer;
}


#btn_next2{
margin-top: 40px;    
width: 50px;
height: 50px;    
text-align: center;
font-size: 20px;
padding: 14px;    
color: white;
border-radius: 50%;    
background: #ff0000;
margin-left: 8px;  
cursor:pointer;
}

#btn_prev2:hover,#btn_next2:hover{
background:midnightblue;    
}

#flex{
display: flex;    
justify-content: center;

}

#c_slider{
width: 90%;
margin: auto;
}


.serv_titulo2{
display: block;
width: 100%;
font-size: 15px;    
text-align: center;
color: midnightblue;
margin-bottom: 15px;    
}

.serv_txt2{
width: 70%;
margin: auto;    
text-align:center;
color:#808B96;
font-size: 11px;    
margin-bottom: 10px;
margin-top: 1px;    
line-height:20px;
font-weight: 400;    
}


#slider_2 a{
display: block;
color:midnightblue;
text-decoration: none;    
text-align: center;
font-size: 12px;
padding-bottom: 15px;    
}

@media(min-width:768px){

.serv_titulo2{
font-size: 19px;    
}

.serv_txt2{
width: 50%;
font-size: 14px;    
}


#slider_2 a{
display: block;
color:midnightblue;
text-decoration: none;    
text-align: center;
font-size: 12px;
padding-bottom: 15px;    
}
    
    
    
}




/*--------------- C O N T A C T O  -------*/


.main_contacto2  {
margin-top: 40px; 
margin-bottom: -10px;
position: relative;
}


.letras_azules2{
color: midnightblue;
text-align: center;
font-size: 30px;
padding-top: 30px;    
margin-bottom:15px;  
font-family: 'Libre Franklin', sans-serif;       
}

.letras2{
color:#808B96;      
text-align: center;
font-size: 11px;    
font-weight: 100;
line-height: 26px;
letter-spacing: 3px;    
margin-bottom: 30px;   
}


form{
width: 100%;
height: 450px;    
margin: auto;
box-sizing: border-box;   
}


input,textarea{
width: 100%;    
margin: auto;
height:45px;
margin-bottom: 35px; 
padding:17px;
box-sizing: border-box;
font-size: 14px;    
border: none;
border-radius: 40px;    
font-family: 'Libre Franklin', sans-serif;       

}

textarea{
padding: 12px;    
font-size:12px;    
}

.img_correo{
width: 100%;
height: 500px;
}

.main_contacto2 .contenedor{
position: absolute;
top: 47%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width:90%;
}


.contenedor-inputs{
display: flex;
flex-wrap: wrap;  
justify-content: space-between;    
}

.input-50{
width: 43%;    
}


textarea{
min-height: 40px;  
max-height: 200px;
max-width: 100%;    
}

#boton{
float: right;    
width: 30%;    
background:#ff0000;
color: white;
padding: 5px;
font-size: 14px;
height: 35px;    
border-radius: 20px;    
}

#boton:hover{
cursor: pointer;
transform: translateX(0%);
transition: all 1s;      
background:  midnightblue;   
color: white;    
}




@media(min-width:768px){
 
 
textarea{
padding: 17px;    
font-size:16px;   
    
}   
    
.main_contacto2 .contenedor{
position: absolute;
top: 54%;
left: 70%;
transform: translateX(-50%) translateY(-50%);
width:40%;
}  
    
    #boton{
    height: 38px;
    font-size: 16px;    
    }    
}


/*************************  CONTACTANOS *****************/

.main_contacto  {
padding-top: 25px;
background:#0B0B3B;
padding-bottom: 30px;    
}

.main_contacto h1{
display: block;
width: 100%;    
color: white;
font-size: 20px; 
font-family: 'Libre Franklin', sans-serif;
text-align: center;
margin-top: 10px;    
padding-bottom: 30px;    
}


.cont_titulo{
display: block;
margin: auto;    
width: 100%;
text-align:left; 
color: white;
padding-bottom:  6px;    
}

.cont_txt {
display: block;
margin: auto; 
width: 100%;    
font-size: 12px;
text-align: left;
color: white;
 }
.icon-mail {
display: block;
margin: auto; 
width: 100%;    
font-size: 14px;
text-align: left;
color: white;
 }


.sociales{
display: block;
width: 100%;
height: 60px;    
margin: auto;    
text-align:left;
}

.sociales a{
color:white;
font-size: 22px;
text-decoration: none;
margin: 5px;    
}

.icon-facebook{
background:blue;
border-radius: 50%;    
padding: 8px;
}

.icon-twitter{
background: skyblue;    
border-radius: 50%;    
padding: 8px;
}


.icon-instagram{
background: red;    
border-radius: 50%;    
padding: 8px;
}




.contacto{
width: 100%;
margin: auto;    
}

.contacto article {
height:auto;    
margin-bottom: 30px;
}

ul{
  padding-left: 20px;  
    
}

li{
color: skyblue;    
text-decoration: none;
line-height: 45px;
}

a{
text-decoration: none;
color: white;  
font-size: 14px;    
    
}


@media(min-width:768px){
    .contacto{
      display: flex;
      justify-content: space-between;    
    }
    
    .cont_columna{
        
    }
    
    .main_contacto h1{
     padding-top:40px;       
     font-size: 26px; 
     margin-bottom:20px; 
    }
    
    .cont_titulo{
        font-size: 16px;
        text-align: left;
        margin-bottom: 10px;
    }
    
    .cont_txt{
        color: white;
        font-size: 14px;
        text-align: left;
    }
    
}




/********************** CONTACTO 2 ********************/

@media(max-width:480px){
    form{
    width: 100%;    
    }    
    
}

@media(min-width:768px){
    .contacto2{
        display: flex;
        width: 85%;
        margin: auto;
    }
    
.contacto2 iframe{
height: 200px;
margin-bottom: 20px; 
margin-left: auto;

}
    .contacto2 h7{
    text-align: center;
    font-size: 16px;    
    }    
    
}

/*********************  AVISO PRIVACIDAD *****************/

h9{
display: block;
text-align: center;    
padding: 10px;
margin-bottom: 10px;    
font-size: 12px;    
font-family: cursive;
}